<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";

import { Page } from "@vben/common-ui";
import { Button, Card, Col, Row, Descriptions, DescriptionsItem } from "ant-design-vue";
import { list } from "#/api/monitor/redis";
import { cloums } from "./schemas";


const redisInfo = ref([]);
const redisData = ref([]);
const redisVariable = ref([]);


const labelStyle = ref({
  width: "180px",
});

async function loadInfo() {
  try {
    const data = await list();
    redisInfo.value = data;
    redisData.value = data.data || [];
    redisVariable.value = data.variable || [];
  } catch (error) {
    console.warn(error);
  }
}

onMounted(async () => {
  await loadInfo();
});

</script>

<template>
  <Page>
    <Row :gutter="[15, 15]">
      <Col :span="24">
        <Card size="small">
          <Descriptions
            :bordered="true"
            :column="12"
            :label-style="labelStyle"
            title="Redis监控信息"
            size="small"
          >
            <template v-for="item in cloums" :key="item.field">
              <DescriptionsItem :label="item.label" :span="item.span" >
                <a-tooltip :title="redisVariable?.[item.field] || ''">
                  <span class="description-item">{{
                    redisVariable?.[item.field] || ""
                  }}</span>
                </a-tooltip>
              </DescriptionsItem>
            </template>
          </Descriptions>
        </Card>
      </Col>
    </Row>
  </Page>
</template>

<style lang="scss" scoped>
.description-item {
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 添加省略号 */
  white-space: nowrap; /* 不换行 */
}
</style>
